<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue学习</title>
    <script src="./js/vue2.js"></script>
  </head>
  <body>
    <div id="app">
      <h3 v-color>我是一个vue2中定义的标题</h3>
    </div>
    <script>
      // vue2中自定义指令它有5个钩子函数
      //  + bind      指定和标签开始绑定   created beforeMount
      //  + inserted  绑定好的指令标签已挂载到父节点上  mounted

      //  + componentUpdate 更新之前  beforeUpdate
      //  + update  更新之后   updated
      
      //  + unbind  卸载   beforeUnmount unmount
      
      // 全局  和   局部
      // bind / update
      // 简写函数 Vue.directive('名称',(el,bindings,vnode,prevnode)=>{})
      // +++ 全局定义是在Vue类中来定义
      Vue.directive('color', {
        bind(el) {
          el.style.color = 'red'
        }
      })

      new Vue({
        el: '#app',
        data: {},
        directives: {
          test: {}
          // test(el){}
        }
      })
    </script>
  </body>
</html>
